<template>
	<view class="u-p-t-40 u-p-l-60 u-p-r-60 u-p-b-30 logintainer">
		<button class="avatarwrap" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="uimage" :src="avatarUrl"></image>
		</button>
		<u-form class="forms" :model="loginModel" ref="form1">
			<u-form-item prop="phone" left-icon-style="font-size:24px;color:#4BC26A" left-icon="phone" label-width="auto">
				<u-input placeholder="请输入电话" v-model="loginModel.phone" />
			</u-form-item>
			<u-form-item prop="username" left-icon-style="font-size:24px;color:#4BC26A" left-icon="account" label-width="auto">
				<u-input placeholder="请输入用户名" v-model="loginModel.username" />
			</u-form-item>
			<u-form-item prop="idNumber" left-icon-style="font-size:24px;color:#4BC26A" left-icon="tags-fill" label-width="auto">
				<u-input placeholder="请输入身份证号码" v-model="loginModel.idNumber" />
			</u-form-item>
			<u-form-item prop="password" left-icon-style="font-size:24px;color:#4BC26A" left-icon="lock-fill" label-width="auto">
				<u-input placeholder="请输入密码" v-model="loginModel.password" />
			</u-form-item>
			<u-form-item prop="confirm" left-icon-style="font-size:24px;color:#4BC26A" left-icon="checkmark" label-width="auto">
				<u-input placeholder="请输入确认密码" v-model="loginModel.confirm" />
			</u-form-item>
		</u-form>
		<u-button @click="commit" shape="circle" style="padding: 10px 0px 30px 0px;width: 100%;" type="success">注册</u-button>
		
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {onReady} from '@dcloudio/uni-app';
	import {registerApi} from '../../src/api/user.js'
	const avatarUrl = ref('/static/user.jpg')
	//表单ref属性
	const form1 = ref()
	const loginModel = reactive({
		username: '',
		password: '',
		confirm:'',
		phone:''
	})
	//表单验证规则
	const rules = reactive({
		phone: [{ required: true, message: '请输入电话', trigger: ['change'] }],
		username: [{ required: true, message: '请输入账号', trigger: ['change'] }],
		password: [{ required: true, message: '请输入密码', trigger: ['change'] }],
		confirm: [{ required: true, message: '请输入确定密码', trigger: ['change'] }],
		idNumber: [{ required: true, message: '请输入确定密码', trigger: ['change'] }],
	})
	const onChooseAvatar = (e) => {
		console.log(e)

	}
	onReady(()=>{
		form1.value.setRules(rules)
	})
	//跳转登录
	const toLogin = ()=>{
		uni.navigateTo({
			url:'../../pages/login/login'
		})
	}
	//表单提交
	const commit = () =>{
		form1.value.validate(async(valid)=>{
			if(valid){
				console.log(loginModel)
				if(loginModel.password != loginModel.confirm){
					uni.showToast({
						icon:'none',
						title:'密码和确定密码不一致',
						duration:1000
					})
					return;
				}
				let res = await registerApi(loginModel)
				if(res && res.code == 200){
					//跳转登录
					uni.navigateTo({
						url:'../../pages/login/login'
					})
				}
			}
		})
	}
	
	
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.logintainer {
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

		.forms {
			width: 100%;
			background: #fff;
			padding: 35px 20px;
			border-radius: 10px;
		}
	}

	.avatarwrap {
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70px;
		width: 70px;
		padding: 0px;

		.uimage {
			height: 70px;
			width: 70px;
			border-radius: 50%;
			margin: 5px 0px;
		}
	}
</style>
